<template>
    <div>
    <h1>展示地域多级分类如下</h1>
      <p>一级地域</p>
      <div>
          <tr v-for="i in catelist" :key="i.id" @click="areamore(i.id)">
              <td>{{i.name}}</td>
          </tr>
          <textarea value="一级地域" v-for="i in catelist" :key="i.id" @mouseover="areamore(i.id)">{{i.name}}</textarea>    
      </div>
      <p></p>
      <p></p>
      <p>多级地域</p>
      <div>
           <tr v-for="i in catelist2" :key="i.id" @click="areamore(i.id)">
              <td>{{i.name}}</td>
          </tr>
          <textarea value="多级地域" v-for="i in catelist2" :key="i.id" @mouseover="areamore(i.id)">{{i.name}}</textarea>
      </div>
    </div>
</template>

<script>
import {areaone}  from './axios_api/api.js'
import {areamore}  from './axios_api/api.js'
export default {
    name:"areashow",
    data() {
        return {
           catelist:"",
           catelist2:"",
         
        }
    },
    methods:{
        areaone(){
            areaone().then(res=>{
                console.log(res)
                this.catelist = res.data
            })
        },
        areamore(id){
            console.log(id)
        var data = {"p_id":id}
        areamore(data)
        .then(res=>{
          console.log(res)        
          this.catelist2 = res.data
      })
  },

    },
    created() {
        this.areaone()
        this.areamore()  
    },
}
</script>

<style>

</style>
